<!--  -->
<template>
  <div class="device-toolbar-u" v-show="show">
    <div :class="{'pc-u':true, 'active':device === 1}" @click="clickDevicePc"><i class="icon_device icon_device1"></i>
    </div>
    <div :class="{'tel-u':true, 'active':device === 2}" @click="clickDeviceTel"><i class="icon_device icon_device2"></i>
    </div>
  </div>
</template>

<script>
// import * as WindowType from '@/config/windowtype.js'
import * as PubsubType from '@/config/pubsubtype.js'
import PubSub from 'pubsub-js'
import * as WindowType from '@/config/windowtype.js'
import VueFunctions from '@/core/VueFunctions.js'

export default {
  created () {
    // 定义返回当前设计区域的显示设备是什么，pc、手机、还是其他什么，只要返回 device 数据结果便可
    VueFunctions.method(WindowType.GET_INFO_DESIGN_DEVICE, () => {
      return this.device
    })
    PubSub.subscribe(PubsubType.PUBSUB_DESIGN_EDITOR_PAGE, (event, bool) => {
      this.show = bool
    })
  },
  mounted () {
    PubSub.subscribe(PubsubType.PUBSUB_IFRAME_LOADING_OVER, (event, data) => {
    })
    PubSub.subscribe(PubsubType.PUBSUB_CHANGE_DEVICE_EDITMENUFOOTFIXED, (event, data) => {
      if (this.device !== 2) {
        this.clickDeviceTel()
        setTimeout(() => {
          // 调用方法，显示弹窗
          VueFunctions.do(WindowType.EDIT_COMPONENT_WITH_COMPONENTMENUFOOTFIXED)
        }, 1000)
      } else {
        // 调用方法，显示弹窗
        VueFunctions.do(WindowType.EDIT_COMPONENT_WITH_COMPONENTMENUFOOTFIXED)
      }
    })
  },
  data () {
    return {
      show: false,
      device: 1
    }
  },
  methods: {
    clickDevicePc () {
      this.device = 1
      PubSub.publish(PubsubType.PUBSUB_CHANGE_DEVICE, { device: this.device })
    },
    clickDeviceTel () {
      this.device = 2
      PubSub.publish(PubsubType.PUBSUB_CHANGE_DEVICE, { device: this.device })
    }
  }
}

</script>

<style scoped lang="scss">
.device-toolbar-u {
  display: flex;
  align-items: center;
  height: 48px;

  > div {
    margin: 0 7px;
    cursor: pointer;
  }

  .icon_device {
    width: 25px;
    height: 25px;
    display: inline-block;
    background: url('~@/assets/images/icon_device.png') no-repeat;
  }

  .icon_device1 {
    background-position: 0 -25px;
  }

  .icon_device2 {
    background-position: 0 0;
  }

  .active .icon_device1 {
    background-position: -25px -25px;
  }

  .active .icon_device2 {
    background-position: -25px 0;
  }
}
</style>
